<template>
  <div id="login-page">
    <div class="login">
      <el-form
        label-position="top"
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model.number="ruleForm.userName"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input
            v-model="ruleForm.passWord"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <p>账号：1111</p>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <p>密码：1111</p>
        </el-form-item>
      </el-form>

      <div class="right-btn">
        <span class="right-title">医院后台管理系统</span>
      </div>
    </div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { user } from "../../utils/api/login";
import { ref, reactive, toRefs, computed, watch } from "vue";
import storege from "../../utils/storege";
export default {
  props: {},
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    const { state, gecommit, getters, dispatch } = useStore();
    const ruleFormRef = ref();

    const checkAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入用户名"));
      }
      callback();
    };

    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("密码不能为空"));
      }
      callback();
    };

    const ruleForm = reactive({
      passWord: "",
      userName: "",
    });
    const rules = reactive({
      passWord: [{ validator: validatePass, trigger: "blur" }],
      userName: [{ validator: checkAge, trigger: "blur" }],
    });

    const submitForm = (formEl = undefined) => {
      if (!formEl) return;
      console.log(ruleForm);
      formEl.validate((valid) => {
        if (valid) {
          user(ruleForm).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              storege.setStorage("userName", res.data.userName);
              storege.setStorage("userId", res.data.userId);
              open2();
              router.push({
                path: "/home",
              });
            } else {
              open3();
            }
          });
        } else {
          return false;
        }
      });
    };
    const open2 = () => {
      ElMessage({
        message: "登陆成功",
        type: "success",
      });
    };
    const open3 = () => {
      ElMessage({
        message: "用户名或者密码错误",
        type: "warning",
      });
    };
    return {
      ruleFormRef,

      submitForm,
      rules,
      ruleForm,
    };
  },
};
</script>
<style lang="scss" scoped>
#login-page {
  width: 100%;
  height: 100%;
  background-color: #333;
  background: url(../../assets/bj.jpg) no-repeat 100% / cover;
}
.login {
  position: absolute;
  backdrop-filter: blur(10px);

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  box-shadow: 4px 4px 8px 8px rgba(112, 210, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  .el-input {
    ::v-deep(.el-input__wrapper) {
      background-color: rgba(0, 0, 0, 0.1);
      color: #000;
    }
  }
}
.right-btn {
  width: 360px;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  flex-flow: column;
  color: #fff;
  align-items: center;
  justify-content: center;
  .right-title {
    padding: 12px 24px;
    border: 1px solid #fff;
    border-image: linear-gradient(
        to bottom right,
        rgb(255, 255, 255),
        rgba(0, 0, 0, 0),
        rgb(255, 255, 255)
      )
      10;
  }
  color: #333;
}
.el-form {
  padding: 40px;
  width: 280px;
  background-color: rgba(255, 255, 255, 0.9);
}
.el-form-item {
  margin-bottom: 28px !important;
}
.int ::v-deep(.el-input__inner) {
  border: none !important;
  color: #000;
  background-color: #f1f1f1 !important;
  &::placeholder {
    color: #999 !important;
  }
}
.code-int {
  width: 50%;
}
.login-btn {
  float: right;
  padding: 12px 48px;
}
.el-button {
  background-color: #0066ff;
  border: none;
  width: 100%;
  margin-top: 20px;
}
</style>
